<template>
  <div class="index">
    <myheader></myheader>
    <div class="dashboard">
        <p>
        品牌:
        <el-button size="small" @click="selectBrand('Apple')">Apple</el-button>
        <el-button size="small" @click="selectBrand('Beats')">Beats</el-button>
        <el-button size="small" @click="selectBrand('Sonos')">Sonos</el-button>
        <el-button size="small" @click="selectBrand('B&O')">BxO</el-button>
        <el-button size="small" @click="selectBrand('Bose')">Bose</el-button>
        </p>
      <p @click="selectColor">
        颜色:
        <el-button size="small">白色</el-button>
        <el-button size="small">金色</el-button>
        <el-button size="small">红色</el-button>
        <el-button size="small">蓝色</el-button>
      </p>
      <p>
        排序:
        <el-button size="small" @click="resort('id')">默认</el-button>
        <el-button size="small" @click="resort('sales')">销量</el-button>
        <el-button size="small" @click="resort('cost')">价格</el-button>
      </p>
    </div>
    <div style="margin: 0 auto; width: 1000px">
      <div class="content">
        <div v-for="item in sortedData" :key="item.id">
          <div class="card">
              <div>
                <el-button @click="todetail(item.id)">
                <img :src="item.image" alt="没有找到图片" width="100%" />
                </el-button>
                <div style="text-align: center; width: 100%; font-size:13px">
                    {{ item.name }} <br />
                    {{ item.brand }} <br />
                    {{ item.color }} 
                    <div class="color" :style="{'background-color':'#e2e2e2'}" v-if="item.color=='白色'"></div>
                    <div class="color" :style="{'background-color':'red'}" v-else-if="item.color=='红色'"></div>
                    <div class="color" :style="{'background-color':'blue'}" v-else-if="item.color=='蓝色'"></div>
                    <div class="color" :style="{'background-color':'rgb(255, 243, 17)'}" v-else></div>
                    <br />
                </div>
              </div>
            <el-button size="small" style="margin-bottom:0" @click="handleAddCart(item.id)">添加到购物车</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {product} from '../../moke/product_data'
export default {
  name: "index",
  data() {
    return {
      sortedData: [],
      product_data: product
    }
  },
  methods: {
    todetail(id) {
      this.$router.push(`/detail/${id}`);
    },
    resort(way) {
      this.sortedData = this.product_data
      function compare(key) {
        return function (obj1, obj2) {
          if (Number(obj1[key]) < Number(obj2[key])) {
            return -1;
          } else if (obj1[key] === obj2[key]) {
            return 0;
          } else {
            return 1;
          }
        };
      }
      this.sortedData.sort(compare(way));
    },
    selectBrand(key) {
        this.sortedData = this.product_data.filter(item=>item.brand == key)
    }, 
    selectColor(e) {
        let key = e.target.innerHTML
        this.sortedData = this.product_data.filter(item=>item.color == key)
    },        handleAddCart(id) {
            this.$store.commit('addCart', id);
        }
  },
  created() {
    this.sortedData = this.product_data;
  },
  computed: {},
};
</script>

<style scoped>
  .index {
    background-color: lightgray;
  }
  .dashboard {
    margin: 10px;
    padding: 20px;
    background-color: white;
  }

  .content {
    margin: 10px;
    padding: 2px;
    /* width :900px; */
    margin: 10 auto;
    /* display: flex;
          justify-content: center; */
  }
  .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    float: left;
    width: 200px;
    height: 300px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    background-color: white;
  }
  .color{
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #000;
    text-align: center;
    display: inline-block;
  }
</style>